<template>
<div>
  <div class="recommend-tit">热销推荐</div>
  <ul>
    <router-link
      tag="li"
      class="item"
      v-for="item of list"
      :key="item.id"
      :to="'/detail/' + item.id"
    >
      <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" alt="">
      </div>
      <div class="item-info">
        <p class="item-title">{{item.tit}}</p>
        <p class="item-desc">{{item.desc}}</p>
        <button class="item-btn">查看详情</button>
      </div>
    </router-link>
  </ul>
  <div class="recommend-more">查看更多</div>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array,
  },
  data() {
    return {

    };
  },
};
</script>

<style lang="stylus" scoped>
@import '~style/mixins.styl'
.recommend-tit
  padding: 2vw
  font-size: 4vw
  background: #ccc
.item
  display : flex
  height: 24vw
  overflow: hidden
  padding-top: 2vw
  .item-img-wrapper
    flex-center()
    width: 28vw
    padding: 1vw
    img
      max-width : 100%
      max-height : 100%
  .item-info
    width: 67vw
    position: relative
    padding: 2vw
    .item-title
      font-size: 4vw
      ellipsis()
      font-weight : bold
    .item-desc
      margin-top: 2vw
      font-size : 3vw
      overflow:hidden
      height: 7vw
      line-height: 4vw
      ellipsis-2()
      color: #666
    .item-btn
      position : absolute
      bottom: 2vw
      padding:.3vw 2vw
      right: 2vw
      font-size : 3vw
      border: none
      border-radius: .5vw
      color: #fff
      background : #ff6600
.recommend-more
  margin-top: 2vw
  padding: 2vw
  text-align: center
  border-top: 1px solid #ddd
  border-bottom: 1px solid #ddd
  font-size: 5vw
  color: rgb(77, 198, 238)
</style>
